<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--
        bar:'#tb' 是引用了另一个工具栏，这个工具栏要额外的进行定义
    -->
    <table id="dg" class="easyui-datagrid" title="属性列表" data-options="singleSelect:true ,method:'get',toolbar:'#tb'">
        <thead>
        <tr>
            <th data-options="field:'id'" width="20%">属性id </th>
            <th data-options="field:'attrName'" width="60%">属性名</th>
            <th data-options="field:'isEnabled'" width="20%">是否启用</th>
        </tr>
        </thead>
    </table>

    <!--
        被属性列表引用的div工具栏
    -->
    <div id="tb" style="padding:5px;height:auto">
        <div style="margin-bottom:5px">
            <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="addAttrInfo()">添加</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editAttrInfo()">编辑</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="deleteAttrInfo()">删除</a>
        </div>
        <div>
            <!--
                一级菜单变化会动态的改变二级菜单的内容
                二级菜单变化会动态的改变三级菜单的内容
                三级菜单变化会动态的改变列表显示的属性
                ps： 页面初始化的时候就要执行的方法

                一级菜单要加载的内容，一般情况下要写js实现，但是利用easyui可以直接将这种动态变化绑定到元素上，给下拉菜单绑定一个data-options即可。

                data-option标签中的内容：
                    url：通过此链接利用ajax获得json数据
                    valueField：下拉选项的值要绑定json中的元素
                    textField：下拉选项的显示内容要绑定json中的元素
                    onSelect：选中某个下拉选项会触发的方法
                    .combobox（'clear'） : 清空下拉菜单
                    .combobox('reload','xxx'); 让某个下拉菜单按照路径加载数据
            -->
            一级分类：
            <select id="ctg1ForAttrList"  class="easyui-combobox"  style="width:100px"
                    data-options="
                                valueField:'id',
                                textField:'topCategory',
                                url:'getCatalog1',
                                onSelect:function(rec){
                                    $('#ctg2ForAttrList').combobox('clear');
                                    $('#ctg3ForAttrList').combobox('clear');
                                    $('#ctg2ForAttrList').combobox('reload','getCatalog2?catalog1Id='+rec.id);
                                                        }">
            </select>
            二级分类：
            <select name="ctg2ForAttrList" id="ctg2ForAttrList"  class="easyui-combobox" style="width:100px"
                    data-options="
                                valueField:'id',
                                textField:'twoCategory',
                                onSelect:function(rec){
                                    $('#ctg3ForAttrList').combobox('clear');
                                    $('#ctg3ForAttrList').combobox('reload','getCatalog3?catalog2Id='+rec.id);
                                                        }">
            </select>
            三级分类：
            <select name="ctg3ForAttrList" id="ctg3ForAttrList"  class="easyui-combobox" style="width:100px"
                    data-options="
                                valueField:'id',
                                textField:'threeCategory'" >
            </select>
            <a href="#" class="easyui-linkbutton" iconCls="icon-search" onclick="javascript:reloadAttrList()">刷新属性列表</a>
        </div>
    </div>

    <!--弹出框html-->
    <div id="dlg" class="easyui-dialog" title="编辑属性" style="width:600px;height:400px;" closed="true" data-options="iconCls:'icon-save',resizable:true,modal:true" buttons="#bb" >
        <form id="attrForm">
            <br/>
            <label>属性名称:</label>
            <input  id="attrName" name="attrName" class="easyui-textbox" data-options="" style="width:100px"/>
            <input  id="attrId" name="attrId" type="hidden"  />
            <br/><br/>
            <table id="dg_av" class="easyui-datagrid" title="属性值列表"></table>
        </form>
    </div>

    <div id="bb">
        <a href="#" class="easyui-linkbutton" onclick="saveAttr()">保存</a>
        <a href="#" class="easyui-linkbutton">关闭</a>
    </div>


</body>
<script type="text/javascript">

    /** 刷新环境列表 */
    function reloadAttrList() {
        var ctg3val=$("#ctg3ForAttrList").combobox('getValue');
        $('#dg').datagrid({url:'getAttrList?catalog3Id='+ctg3val});
    }

    /**
     * 初始化操作 点击添加按钮，初始化页面
     */
    function initAttrValueDatagrid(){
        // 清除数据
        $('#dg_av').datagrid('loadData', { total: 0, rows: [] });


        datagrid = $("#dg_av").datagrid({
            columns:[[
                { field:'id',title:'编号',width:'20%'},
                { field:'valueName',title:'属性值名称',width:'80%',
                    editor: {
                        type: 'validatebox', options: { required: true}  //必填项
                    }
                }
            ]],
            toolbar:[
                {
                    text:'添加',iconCls:'icon-add',
                    handler:function () {
                        datagrid.datagrid('appendRow',{id:'',valueName:''});
                    }
                },'-',
                {
                    text:'删除',iconCls:'icon-remove',
                    handler:function () {
                        var row = datagrid.datagrid('getSelected');
                        if (row) {
                            var rowIndex = datagrid.datagrid('getRowIndex', row);
                            datagrid.datagrid('deleteRow', rowIndex);
                        }
                    }
                }
            ],

            // //双击开启编辑行
            onDblClickRow: function (rowIndex, rowData) {
                datagrid.datagrid("beginEdit", rowIndex);
                //设定当失去焦点时,退出编辑状态
                var valueName = rowData.valueName;
                $("input.datagrid-editable-input").val(valueName).bind("blur",function(evt){
                    datagrid.datagrid('endEdit',rowIndex);
                });
            }
        });
    }

    /** 添加按钮 */
    function addAttrInfo() {
        if(!checkBeforeDialog()){
            return ;
        }
        //弹出框
        $("#dlg").dialog("open");
        //进系统前先清空
        $("#attrId").val("");
        $("#attrName").textbox('clear');
        $('#dg_av').datagrid({url:''});
        // 初始化datagrid
        initAttrValueDatagrid();
    }

    /** 编辑按钮 */
    function editAttrInfo() {
        if(!checkBeforeDialog()){
            return ;
        }
        // 初始化datagrid
        initAttrValueDatagrid();
        //进页面前先加载数据
        var attrInfoRow=$("#dg").datagrid('getSelected');
        $('#dg_av').datagrid({url:'getAttrValueList?attrId='+attrInfoRow.id});
        $("#attrId").val(attrInfoRow.id);
        $("#attrName").textbox('setValue',attrInfoRow.attrName);
        //弹出框
        $("#dlg").dialog("open");
    }

    /** 删除按钮*/
    function deleteAttrInfo() {
        $.messager.alert('警告','敬请期待','warning');
    }

    /**点击添加按钮和编辑按钮的校验*/
    function checkBeforeDialog(){
        var ctg3val = $("#ctg3ForAttrList").combobox('getValue');
        if(ctg3val==''){
            $.messager.alert('警告','请先选择三级分类','warning');
            return false;
        }
        return true;
    }

    /** 数据与后台进行交互 以json的方式 传送给后台*/
    function saveAttr(){
        var attrJson ={} ;
        //把表格中的数据循环组合成json
        var attrValueRows= $("#dg_av").datagrid('getRows');
        for (var i = 0; i < attrValueRows.length; i++) {
            //技巧：与bean中的属性同名可以借助springmvc直接注入到实体bean中，即使是list也可以。
            attrJson["attrValueList["+i+"].id"]=attrValueRows[i].id;
            attrJson["attrValueList["+i+"].valueName"]=attrValueRows[i].valueName;
        }
        attrJson["attrName"]=$("#attrName").val();
        attrJson["id"]=$("#attrId").val();
        attrJson["catalog3Id"]=$("#ctg3ForAttrList").combobox('getValue');
        console.log(attrJson);
        //ajax 保存到后台
        $.post("saveAttrInfo",attrJson,function(data){
            $("#dlg").dialog("close");
            $("#dg").datagrid("reload");
        })
    }
</script>
</html>